<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.11.0/theme-chalk/index.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.11.0/index.js"></script>

  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
</head>

<body>
  <div id="app">
    <avue-crud :option="option" v-model="obj" :data="data">
      <template slot-scope="scope" slot="namesForm">
        <div>
          <span>{{obj.names}}</span>
          <avue-input :disabled="scope.disabled" :label="scope.column.label" v-model="obj.names"></avue-input>
        </div>
      </template>
    </avue-crud>
  </div>
</body>
<script>
  let baseUrl = 'https://cli2.avuejs.com/api/area'
  new Vue({
    el: '#app',
    data() {
      return {
        obj: {
          name: '11'
        },
        data: [],
        option: {
          column: [{
            label: '姓名',
            prop: 'name'
          }],
          group: [
            {
              label: '用户信息',
              prop: 'jbxx',
              icon: 'el-icon-edit-outline',
              column: [
                {
                  label: '姓名',
                  prop: 'name',
                }, {
                  label: '日期',
                  prop: 'date',
                  type: 'date'
                }
              ]
            }, {
              label: '退款申请',
              prop: 'tksq',
              icon: 'el-icon-view',
              column: [
                {
                  label: '省份',
                  prop: 'province',
                  type: 'select',
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  cascaderItem: ['city', 'area'],
                  dicUrl: `${baseUrl}/getProvince`,
                  dicData: 'province',
                  rules: [
                    {
                      required: true,
                      message: '请选择省份',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '城市',
                  prop: 'city',
                  type: 'select',
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  defaultIndex: 1,
                  dicFlag: false,
                  dicUrl: `${baseUrl}/getCity/{{key}}`,
                  rules: [
                    {
                      required: true,
                      message: '请选择城市',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '地区',
                  prop: 'area',
                  type: 'select',
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  defaultIndex: 1,
                  dicFlag: false,
                  dicUrl: `${baseUrl}/getArea/{{key}}`,
                  rules: [
                    {
                      required: true,
                      message: '请选择地区',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '多选',
                  prop: 'checkbox',
                  type: 'checkbox',
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  span: 24,
                  dicUrl: `${baseUrl}/getProvince`
                }
              ]
            }
            , {
              label: '用户信息',
              prop: 'yhxxs',
              icon: 'el-icon-edit-outline',
              column: [
                {
                  label: '测试长度',
                  prop: 'len',
                  maxlength: 5,
                }, {
                  labelWidth: 120,
                  label: '测试自定义',
                  prop: 'names',
                  formslot: true
                }
              ]
            }
          ]
        }
      }
    },
    mounted() {
      this.data = [{
        name: '111',
        province: '110000',
        city: '110100',
        area: '110101',
        checkbox: ['110000']
      }]
    },
    methods: {
    }
  })
</script>

</html>